import { Button, Col, Modal, Row, Switch } from "antd";
import { useParams } from "react-router-dom"
import React, { useEffect, useState } from 'react';
import { Space, Table, Tag } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import CateForm from "./components/CateForm";
import { categoryGet } from "@/api/course";
import { CategoryType } from "@/types/course";
import ButtonAuth from "@/auth/ButtonAuth";



const columns: ColumnsType<CategoryType> = [
  {
    title: '类目级别',
    dataIndex: 'parentId',
    key: 'parentId',
    render: (text) => {
      return text=='0-0'?'一级类目':''
    }
  },
  {
    title: '分类名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '是否上架',
    dataIndex: 'isonline',
    key: 'isonline',
    render:(bool:boolean)=>{
      return <Switch defaultChecked={bool}/>
    }
  },
  {
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button type="primary" size="small">编辑</Button>
        <ButtonAuth permit={['超级管理员']}>
          <Button type="primary" danger size="small">删除</Button>
        </ButtonAuth>
        
      </Space>
    ),
  },
];

const data: CategoryType[] = [
  {
    objectId:'xxx',
    name:'前端开发',
    isonline:true,
    parentId:'aaaa'
  }
];
type Props = {}

export default function Category({}: Props) {
  let params = useParams()
  console.log(params);
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [cateList,setCateList] = useState<Array<CategoryType>>([])
  useEffect(()=>{
    (async()=>{
      let res = await categoryGet()
      let {results} = res.data
      let parentArr = results.filter((item:CategoryType)=>item.parentId=='0-0')
      parentArr.forEach((item:CategoryType)=>{
        let children = results.filter((child:CategoryType)=>child.parentId==item.objectId)
        if(children.length){
          item.children = children
        }
      })
      setCateList(parentArr)
    })()
  },[])
  //弹窗组件新增成功后，更新表格数据
  const handleCateList = (category:CategoryType)=>{
    //新增一级类目
    if(category.parentId=='0-0'){
      cateList.push(category)
    }else{
      let idx = cateList.findIndex(item=>item.objectId==category.parentId)
      if(cateList[idx].children){
        cateList[idx].children!.push(category) //给一个已经有子类目的父级添加
      }else{
        cateList[idx].children = [category] //给一个原本没有子类目的父级添加
      }
    }
    setCateList([...cateList])
  }

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div>
      <Row justify="space-between" align="middle">
          <Col span={6}>分类管理</Col>
          <Col span={3}>
            <Button type="primary" onClick={()=>{setIsModalOpen(true)}}>
              新增分类
            </Button>
          </Col>
      </Row>
      <Table columns={columns} dataSource={cateList} rowKey="objectId"/>;
      <Modal title="新增分类" footer={null} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <CateForm cateList={cateList} handleCancel={handleCancel} handleCateList={handleCateList}/>
      </Modal>
    </div>
  )
}